<template>
  <section class="component module-resource">
    <div style="display:flex">
      <el-col class="module">
        <el-row class="title">模块</el-row>
        <div class="module-tree">
          <el-tree ref="tree" align="left" :data="treeData" show-checkbox node-key="id" :props="defaultProps" :default-checked-keys="defaultCheckedKeys" highlight-current></el-tree>
        </div>
      </el-col>
      <el-col style="width:300px;flex-grow:1">
        <el-row class="title">对应模块功能</el-row>
        <!-- <data-box  ref="table" height="400">
          <template slot="columns">
            <el-table-column prop="name" label="功能名称" :min-width="$helper.getColumnWidth(4)" align="center">
            </el-table-column>
            <el-table-column prop="remark" label="描述" :min-width="$helper.getColumnWidth(3)" align="center">
            </el-table-column>
          </template>
        </data-box> -->
        <el-row class="btn-box">
          <el-button @click="moduleResourceClick()">保存</el-button>
        </el-row>
      </el-col>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Dependencies } from '~/core/decorator'
import { Prop, Watch } from 'vue-property-decorator'
import { RoleService } from '~/service/service-manage/role.service'
import { PageService } from '~/util/page.service'

@Component({})
export default class ModuleResource extends Vue {
  @Dependencies(RoleService)
  private roleService: RoleService

  @Prop({
    type: String,
    required: true
  }) roleId: string

  // 资源树结构
  private treeData: Array<any> = []
  private defaultProps:any = {
    children: 'children',
    label: 'label'
  }
  // 默认选中节点的Keys
  private defaultCheckedKeys: Array<String> = []

  // 递归生成树结构
  private recursionBackTree(originData: Array<any>, rootNodeIds: Array<string>, noParentData: Array<any>) {
    
    let buildNoParentData: Map<string, Array<any>> = new Map()
    for (let v of noParentData) {
      if (v.selected) {
        this.defaultCheckedKeys.push(v.id)
      }
      let currentData = buildNoParentData.get(v.parentId) || []
      let childV:any = {
        id: v.id,
        label: v.name,
        parentId: v.parentId
      } 
      currentData.push(childV)
      buildNoParentData.set(v.parentId, currentData)
    }
    let flag: boolean = false
    let treeDataMap: Map<string, any> = new Map()

    for (let [key, value] of Array.from(buildNoParentData.entries())) {
      let data: any = originData.find(v => v.id === key)
      if (data) {
        let tree: any = {
          id: data.id,
          parentId: data.parentId,
          label: data.name,
          children: value
        }
        treeDataMap.set(data.id, tree)
        flag = !rootNodeIds.includes(data.id)
      } else {
        for (let v of value) {
          treeDataMap.set(v.id, v)
          flag = !rootNodeIds.includes(v.id)
        }
      }
    }
    return flag ? this.recursionBackTree(originData, rootNodeIds, Array.from(treeDataMap.values())) : Array.from(treeDataMap.values())
  }

  /**
   * 生成树结构
   */
  private generateTreeData(originData: Array<any>): Array<any> {
    // 找出所有不是父节点的节点
    let noParentData = originData.filter(v => !originData.find(o => o.parentId === v.id))
    // 找出根节点
    let rootNodeIds: Array<string> = originData.filter(v => !v.parentId || !originData.find(e=> e.id === v.parentId)).map(e=> e.id)
    return this.recursionBackTree(originData, rootNodeIds, noParentData)
  }

  /**
   * 刷新数据
   */
  private refreshData(originData: Array<any>) {
    this.defaultCheckedKeys = []
    this.treeData = this.generateTreeData(originData)
  }
  
  /**
   * 角色分配模块资源
   */
  private moduleResourceClick() {
    let ref: any = this.$refs.tree
    let checkedSet: Set<string> = new Set([])
    ref.getCheckedNodes(false, true).forEach(v=> {
      if (v.id)  checkedSet.add(v.id)
      if (v.parentId) checkedSet.add(v.parentId)
    })
    let checkedSetArray: Array<string> = Array.from(checkedSet)
    let model: any = {
      roleId: this.roleId,
      resourceId: checkedSetArray
    }
    this.roleService.assignResourceToRole(model).subscribe(
      data => {
        // 关闭窗口
        this.close()
        this.$message.success("分配成功")
      },
      ({msg}) => this.$message.error(msg)
    )
  }

  /**
   * 关闭窗口
   */
  private close() {
    this.$emit("close")
  }

}
</script>


<style lang="less" scoped>
.title {
  height: 40px;
  background: #e4e4e4;
  line-height: 40px;
  text-align: center;
  border: 1px solid #dddddd;
  font-size: 0.875rem;
  color: #333;
}
.btn-box {
  margin-top: 20px;
  text-align: center;
}
.module {
  flex-basis: 250px;
  border: 1px solid #e4e4e4;
  height: 500px;
  width: 250px;
}
.module-tree {
  height: 460px;
  overflow: auto;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.module-tree::-webkit-scrollbar {
  width: 0px;
}
</style>
